import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import './App.less'
export default class App extends Component {
  //初始化状态
  state = {
    todos: [
      {id:3,name:'吃饭',done:true},
      {id:2,name:'睡觉',done:true},
      {id:1,name:'打代码',done:false},
    ],
  }
  //handleValue用于接受子组件中传递的内容并处理
  handleValue=(inputValue)=>{
    //inputValue即为接受到的子组件中传递的内容
    let {todos} = this.state
    //此处的id设置为nanoid 终端中使用yarn add nanoid
    let newValue = {id:nanoid(),name:inputValue,done:false}
    this.setState({todos:[newValue,...todos]})
  }
  //删除任务
  handleMove=(itemId)=>{
    let {todos} = this.state
    const todos1 = JSON.parse(JSON.stringify([...todos]))
    this.setState({todos:todos1.filter(item=>item.id !==itemId)})
  }
  //选中状态
  handleCheck = (id,done)=>{
    let {todos} = this.state
    //匹配处理数据
    let newTodos=todos.map(item=>{
      if(item.id==id){
        return {...item,done}
      }else{
        return item
      }
    })
    this.setState({todos:newTodos})
  }
  //全选
  handleAllDone = (dones)=>{
    let {todos} = this.state
    let todos2 = todos.map(item=>{
       return {...item,done:dones}
    })
    this.setState({todos:todos2})
  }
  //删除已完成任务
  handleAllRemove = (obj)=>{
    //接收到没有完成的任务
    console.log(obj);
    let {todos} = this.state
    //将数据包改为没有完成的任务(变相删除了完成了任务的)
    this.setState({todos:obj})
  }
  render() {
    const {todos} = this.state
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header handleValue={this.handleValue}/>
          <List todos={todos} handleMove={this.handleMove} handleCheck={this.handleCheck}/>
          <Footer todos={todos} handleAllDone={this.handleAllDone} handleAllRemove={this.handleAllRemove}/>
        </div>
      </div>
    )
  }
}

